<template>
  <van-tabbar v-model="active" @change="tabChanged">
    <van-tabbar-item icon="home-o" name="home">主页</van-tabbar-item>
    <van-tabbar-item icon="points" name="category">分类</van-tabbar-item>
    <van-tabbar-item icon="cart-o" name="cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" name="mine">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  props: {
    activeItem: {
      type: String,
      require: false,
    },
  },
  setup(props, ctx) {
    const router = useRouter();
    const state = reactive({
      active: "home",
    });

    if (props.activeItem != null) {
      state.active = props.activeItem;
    }

    const tabChanged = (active: string) => {
      if (active == "home") {
        router.push("/home");
      } else if (active == "category") {
        router.push("/category");
      } else if (active == "cart") {
        router.push("/cart");
      } else if (active == "mine") {
        router.push("/mine");
      }
    };

    return {
      ...toRefs(state),
      tabChanged,
    };
  },
});
</script>
